import React, { CSSProperties } from 'react'
import { View, Text, Image } from '@tarojs/components'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import { EMPTY_TYPE } from '@CONSTANTS/app'
import './index.scss'

const EMPTY_MAP = {
  [EMPTY_TYPE.NoContent]: {
    src: Images.empty.no_content,
    title: i18n.common.no_content(),
  },
  [EMPTY_TYPE.NoNetwork]: {
    src: Images.empty.no_network,
    title: i18n.common.no_network(),
    buttonText: i18n.common.reload(),
  },
  [EMPTY_TYPE.NoResult]: {
    src: Images.empty.no_result,
    title: i18n.common.no_result(),
  },
}

interface Props {
  src: string
  title: string
  content?: string
  containerStyle?: string | CSSProperties
  showButton?: boolean
  buttonText?: string
  onClick?: () => void
  imageClass?: string
  contentTextClass?: string
  buttonClass?: string
  titleTextClass?: string
}

export const Empty: React.FC<Props> = ({
  src,
  title,
  content = '',
  containerStyle = {},
  showButton = false,
  buttonText,
  onClick,
  imageClass = 'empty-custom-image',
  contentTextClass = 'noPlan-custom-content',
  buttonClass = 'empty-custom-buttonContainer',
  titleTextClass = 'empty-custom-title'
}) => (
  <View className="empty-custom-container" style={containerStyle}>
    <View className="empty-custom-content">
      <Image className={imageClass} src={src} />
      <Text className={titleTextClass}>{title}</Text>
      {content && <Text className={contentTextClass}>{content}</Text>}

      {showButton && (
      <View onClick={onClick} className={buttonClass} hover-class="tab-active">
        <Text className="empty-custom-buttonText">{buttonText}</Text>
      </View>
      )}
    </View>
  </View>
)

export const NoContentEmpty = ({ containerStyle = {}, title = '' }) => (
  <Empty
    src={EMPTY_MAP[EMPTY_TYPE.NoContent].src}
    title={title || EMPTY_MAP[EMPTY_TYPE.NoContent].title}
    containerStyle={containerStyle}
  />
)

export const NoResultEmpty: React.FC<{ containerStyle?: string | CSSProperties }> = ({ containerStyle }) => (
  <Empty
    src={EMPTY_MAP[EMPTY_TYPE.NoResult].src}
    title={EMPTY_MAP[EMPTY_TYPE.NoResult].title}
    containerStyle={containerStyle}
  />
)

export const NoInternetEmpty: React.FC<{ containerStyle?: string | CSSProperties; onClick: () => void }> = ({
  containerStyle,
  onClick
}) => (
  <Empty
    src={EMPTY_MAP[EMPTY_TYPE.NoNetwork].src}
    title={EMPTY_MAP[EMPTY_TYPE.NoNetwork].title}
    containerStyle={containerStyle}
    buttonText={EMPTY_MAP[EMPTY_TYPE.NoNetwork].buttonText}
    imageClass="noInternet-custom-image"
    showButton
    onClick={onClick}
  />
)

interface EmptyWithBtnProps {
  containerStyle?: string | CSSProperties
  onClick: () => void
  src: string
  title: string
  buttonText: string
  imageClass?: string
  titleTextClass?: string
  content?: string
  buttonClass?: string
}

export const EmptyWithBtn: React.FC<EmptyWithBtnProps> = ({
  src, title, containerStyle = {},
  onClick, buttonText, imageClass = 'noInternet-custom-image',
  titleTextClass, buttonClass, content }) => (
    <Empty
      src={src || EMPTY_MAP[EMPTY_TYPE.NoContent].src}
      title={title || EMPTY_MAP[EMPTY_TYPE.NoContent].title}
      content={content}
      containerStyle={containerStyle}
      buttonText={buttonText || EMPTY_MAP[EMPTY_TYPE.NoNetwork].buttonText}
      imageClass={imageClass}
      titleTextClass={titleTextClass}
      buttonClass={buttonClass}
      showButton
      onClick={onClick}
    />
)
